<template>
  <div id="tableList">
    <h3 class="echarts-title">
      月活跃用户等级明细
    </h3>
    <!--上部搜索条件组件-->
    <topSearch
      :form-inline="formInline"
      @toSearch="toSearch"
      @setIdentityList="setIdentityList"
    ></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:activeAnalysis:export'"
        type="warning"
        icon="el-icon-download"
        @click="exportData"
      >
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <div class="table-conBtn">
      <el-radio-group v-model="identity">
        <el-radio-button
          v-for="item in identityList"
          :label="item.dictValue"
          :key="item.dictValue"
        >
          {{ item.dictLabel }}</el-radio-button
        >
      </el-radio-group>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="490"
      ref="table"
      :row-class-name="tableRowClassName"
      class="details-table"
    >
      <el-table-column
        label="活跃月份"
        prop="month"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column label="等级" prop="level" min-width="130" align="center">
        <template slot-scope="scope">
          {{ scope.row.level === 'total' ? '小计' : scope.row.level }}
        </template>
      </el-table-column>
      <el-table-column label="活跃人数" align="center">
        <el-table-column
          label="app"
          prop="app"
          min-width="160"
          align="center"
        ></el-table-column>
        <el-table-column
          label="pc"
          prop="pc"
          min-width="160"
          align="center"
        ></el-table-column>
        <el-table-column
          label="M站"
          prop="wap"
          min-width="160"
          align="center"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        label="等级活跃人数"
        prop="levelActCnt"
        min-width="160"
        align="center"
      ></el-table-column>
    </el-table>
    <dl class="level-des">
      <dt>等级注释：将用户分为6级，按照每月中登录客户端的天数区分</dt>
      <dd>a：1天</dd>
      <dd>b：2天</dd>
      <dd>c：3天</dd>
      <dd>d：3~7天</dd>
      <dd>e：7~10天</dd>
      <dd>f：10~31天</dd>
    </dl>
  </div>
</template>

<script>
import {
  getDetailsList,
  exportDetails
} from '@/api/dataStatistics/activityAnalysis/index.js' // 接口
import topSearch from '@component/dataStatistics/activityAnalysis/topSearchTable' // 上部搜索条件
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'tableList',
  msg: '活跃分析-表格',
  mixins: [saveScrollMixins],
  props: ['powerAry'],
  components: {
    topSearch
  },
  watch: {
    identity(newV, oldV) {
      /*全部/正式用户/试学用户/其他*/
      this.searchList()
    }
  },
  data() {
    return {
      loading: false,
      tableData: [], // table内容
      formInline: {
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        createTime: []
      },
      identity: '',
      identityList: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /*用户列表赋值*/
    setIdentityList(list) {
      this.identityList = [...list]
      this.identity = this.identityList[0].dictValue
      this.searchList()
    },
    /*table 行name回调*/
    tableRowClassName({ row, rowIndex }) {
      /*console.log(row)*/
      if (row.level === 'total') {
        return 'success-row'
      }
      return ''
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({ identity: this.identity }, this.formInline)
      delete obj.createTime
      getDetailsList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 导出 */
    exportData() {
      this.$confirm('确定导出当前数据吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = Object.assign({ identity: this.identity }, this.formInline)
        delete obj.createTime
        let url = exportDetails()
        this.downFile('get', url, obj, '月活跃用户等级明细')
      })
    },
    /* 搜索 */
    toSearch() {
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#tableList {
  .level-des {
    margin: 10px 50px;
    font-size: 14px;
    line-height: 20px;
    color: #555;
  }
  dt {
    padding-bottom: 5px;
  }
  .el-table.details-table {
    th {
      padding: 2px 0 !important;
    }
    td {
      padding: 7px 0 !important;
    }
    .success-row {
      background: rgb(225, 243, 216);
      &:hover > td {
        background: rgb(225, 243, 216) !important;
      }
    }
  }
}
</style>
